<template>
    <li class="todo" :class="{ completed: done, editing: edit }">
        <div class="view">
            <input type="checkbox" class="toggle" :checked="done" @change="$emit('update:done', $event.target.checked)" />
            <label>{{ title }}</label>
            <button class="destroy" @click.stop.self="$emit('delete')"></button>
        </div>
        <input type="text" class="edit" :value="title" @blur="$emit('update:edit', false)" @keyup.enter="onEdit" />
    </li>
</template>

<script>
export default {
    methods: {
        onEdit(event) {
            this.$emit('update:edit', false);
            //传新的值
            console.log(event);
            this.$emit('update:title', event.target.value)
        }
    },
    props: ["title", "done", "edit"],
    emits: ["update:done", "delete", "update:edit", "update:title"]
}
</script>